<!-- Shopping.vue -->
<template>
  <div class="container">
    <mt-popup
      v-model="isShowcartInfo"
      position="bottom"
      v-if="detailInfo"
      v-bind:close-on-click-modal="false"
    >
      <div class="ui-add-shopping" v-if="detailInfo">
        <div class="shopping-info">
          <div class="info-header">
            <img
              src="../../../../assets/image/home/default_image_banner.png"
              class="info-image"
              v-if="!detailInfo.photos || detailInfo.photos.length <= 0"
            />
            <img
              v-bind:src="detailInfo.photos[0]"
              class="info-image"
              v-if="detailInfo.photos && detailInfo.photos.length > 0"
              @click="imgEnlarge(detailInfo.photos)"
            />
            <div class="info-header-div">
              <span class="header-price">￥{{ price }}</span>
              <span>
                <span class="iconfont" v-if="detailInfo.activity">&#xe631;</span>
                <span v-if="detailInfo.activity">{{ detailInfo.activity.name }}</span>
              </span>
              <!-- {{ chooseinfo}} -->
              <span>库存{{ current }}件</span>
              <div class="specifications">
                已选：
                <div class v-for="(item,index) in detailInfo.spec_name">
                  <div
                    class
                    v-for="(key,items, indexs) in detailInfo.spec_value[index]"
                    v-if="detailInfo.goods_spec[items]"
                  >
                    <span>{{detailInfo.goods_spec[items] || ""}}</span>
                  </div>
                </div>
              </div>
              <!-- <span>已选：{{ detailInfo.goods_spec}} {{ defaultColor }} {{ defaultSize }}</span> -->
            </div>

            <span class="iconfont close" v-on:click="closeCartInfo(false)">&#xe65a;</span>
          </div>

          <div class="goods-detail-properties">
            <div
              v-if="detailInfo && detailInfo.goods_spec"
              v-for="(item, index) in detailInfo.spec_name"
              :key="index"
            >
              <div class="goods-properties" v-if="detailInfo.spec_value[index]">
                <p>{{ item }}</p>
                <div class="properties-list">
                  <!-- v-if="index == keyindex" -->
                  <div
                    :class="{ first: index == 1 }"
                    v-for="(key, keyindex, indexs) in detailInfo.spec_value[index]"
                    :key="keyindex"
                  >
                    <img
                      v-if="index == 1 && commodityPicture[keyindex]"
                      class="properties-list-img"
                      :src="commodityPicture[keyindex]"
                    />
                    <span
                      @click="setCurrentIndex(keyindex, detailInfo.spec_value[index], index)"
                      v-bind:class="{
												'active-properties': detailInfo.goods_spec[keyindex]
											}"
                    >{{ key.length > 10 ? key.slice(0, 8) + '...' : key }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="posi-fixed">
            <div class="info-body" id="info-body">
              <p>购买数量</p>
              <div class="ui-number">
                <div
                  class="reduce ui-common"
                  @click.stop="reduceNumber()"
                  v-bind:class="{ 'reduce-opacity': numbers <= 1 }"
                >-</div>
                <input
                  type="number"
                  min="1"
                  class="number"
                  value="1"
                  v-model="numbers"
                  readonly="true"
                />
                <div class="add ui-common" @click.stop="addNumber()">+</div>
              </div>
            </div>
          </div>
          <div class="info-footer">
            <div
              class="footer-button"
              :class="detailInfo.goods_storage > 0 ? 'active-cart' : 'disabled-cart'"
              v-on:click="detailInfo.goods_storage > 0 ? checkProduct(false) : false"
              v-if="!detailInfo.bargain_info && ((!detailInfo.pintuan_type && detailInfo.cart) || (detailInfo.pintuan_type && detailInfo.pintuangroup_list.length))"
            >{{ addCartText }}</div>
            <div
              class="footer-button"
              :class="detailInfo.goods_storage > 0 ? 'active-buy' : 'disabled-buy'"
              v-on:click="detailInfo.goods_storage > 0 ? checkProduct(true) : false"
            >{{ buyNowText }}</div>
          </div>
        </div>
      </div>
    </mt-popup>
    <mt-popup
      v-if="detailInfo.pintuan_type && detailInfo.pintuangroup_list.length"
      v-model="subjectVisible"
      position="right"
      class="common-popup-wrapper"
    >
      <div class="common-header-wrap">
        <mt-header title="拼团列表" class="common-header">
          <mt-button slot="left" icon="back" @click="subjectVisible = false"></mt-button>
        </mt-header>
      </div>
      <div class="common-popup-content">
        <div v-for="(item, index) in detailInfo.pintuangroup_list" @click="goPintuan(item)">
          <mt-cell
            :title="item.member_name"
            is-link
            v-if="!(detailInfo.pintuangroup_share_id > 0 && item.pintuangroup_headid != detailInfo.pintuangroup_share_id)"
          >
            <!--通过拼团分享会员ID判断其他组团是否显示-->
            <span>{{ item.pintuangroup_surplus > 0 ? '还差' + item.pintuangroup_surplus + '人' : '已满员' }}</span>
            <img slot="icon" :src="item.pintuangroup_avatar" width="24" height="24" />
          </mt-cell>
        </div>
      </div>
    </mt-popup>
    <vue-picture-preview class="zIndex" ref="mainSrc" :list="priviewList"></vue-picture-preview>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import vuePicturePreview from "vue-picture-preview";
import { Toast } from "mint-ui";
import { cartAdd } from "../../../../api/homecart";
import { addBargain } from "../../../../api/memberBargain";
export default {
  data() {
    return {
      defaultData: [],
      defaultName: "",
      defaultColor: "",
      defaultSize: "",
      pintuangroup_id: 0,
      subjectVisible: false,
      addCartText: "加入购物车",
      buyNowText: "立即购买",
      numbers:
        this.$store.state.goodsdetail.number > 0
          ? this.$store.state.goodsdetail.number
          : 1, // todo 临时解决
      currentStock: this.$store.state.goodsdetail.detailInfo.goods_storage,
      specStock: null,
      productId: this.$store.state.goodsdetail.currentProductId,
      toastConfig: {
        message: "商品达到每单限购数量",
        position: "middle",
      },
      ids: [],
      info: [],
      propertiPrice: 0,
      earlier: {},
    };
  },
  // commodityPicture
  props: {
    isShowcartInfo: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    vuePicturePreview,
  },
   beforeDestroy() {
    this.move();
  },
  destroyed() {
    this.move();
  },

  created() {
	  console.log(this.isShow)
	  if(this.isShow){
		  this.stop();
	  }else{
		  this.move()
	  }
    for (var i in this.detailInfo.goods_spec) {
      this.defaultData.push(this.detailInfo.goods_spec[i]);
    }
    // this.defaultName = this.defaultData[2]
    // this.defaultColor = this.defaultData[0]
    // this.defaultSize = this.defaultData[1]

    if (this.detailInfo.bargain_info) {
      if (this.detailInfo.bargainorder_info) {
        if (this.detailInfo.bargainorder_info.bargainorder_state == 2) {
          this.buyNowText = "砍价成功去下单";
        } else {
          this.buyNowText = "正在砍价";
        }
      } else {
        this.buyNowText = "发起砍价";
      }
    } else if (this.detailInfo.pintuan_type) {
      this.addCartText = "参加拼团";
      this.buyNowText = "立刻开团";
      this.propertiPrice = this.detailInfo.pintuan_price;
    } else if (this.detailInfo.is_presell == 1) {
      this.buyNowText =
        "预售购买（" +
        this.$moment
          .unix(this.detailInfo.presell_deliverdate)
          .format("YYYY年MM月DD日") +
        "发货）";
    } else if (this.detailInfo.is_goodsfcode == 1) {
      this.buyNowText = "F码购买";
    } else {
      if (this.detailInfo.promotion_type) {
        this.propertiPrice = this.detailInfo.promotion_price;
      } else {
        this.propertiPrice = this.detailInfo.goods_price;
      }
    }
    this.info = this.chooseinfo.specification;
    this.ids = Object.assign([], this.chooseinfo.ids);
  },

  computed: {
    ...mapState({
      isOnline: (state) => state.member.isOnline,
      token: (state) => state.member.token,
      detailInfo: (state) => state.goodsdetail.detailInfo,
      specList: (state) => state.goodsdetail.specList,
      number: (state) => state.goodsdetail.number,
      chooseinfo: (state) => state.goodsdetail.chooseinfo,
	  commodityPicture: (state) => state.goodsdetail.commodityPicture,
	  isShow:(state) => state.goodsdetail.isShowcartInfo,
    }),
    priviewList: function () {
      const list = [];
      if (this.detailInfo.photos.length > 0) {
        // for (let i = 0; i < this.detailInfo.photos.length; i++)
        list.push({ src: this.detailInfo.photos[0] });
        // console.log(list)
      }
      return list;
    },
    price() {
      if (this.detailInfo.pintuan_type) {
        this.propertiPrice = this.detailInfo.pintuan_price;
      } else if (this.detailInfo.promotion_type) {
        this.propertiPrice = this.detailInfo.promotion_price;
      } else {
        this.propertiPrice = this.detailInfo.goods_price;
      }
      return this.propertiPrice;
    },
    current() {
      this.currentStock = this.$store.state.goodsdetail.detailInfo.goods_storage;
      return this.currentStock;
    },
  },

  watch: {
    numbers: function (value) {
      if (value) {
        let goodStorage = this.detailInfo.goods_storage;
        if (value <= 0) {
          this.numbers = 1;
          this.toastConfig.message = "受不了了，宝贝不能再少了";
          Toast(this.toastConfig);
        } else if (value > goodStorage) {
          this.toastConfig.message = "商品库存不足";
          Toast(this.toastConfig);
          this.numbers = goodStorage;
        }
        this.saveNumber(this.numbers);
      }
    },
  },

  mounted() {},

  methods: {
    ...mapActions({
      getGoodsDetail: "getGoodsDetail",
    }),
    ...mapMutations({
      saveCartState: "saveCartState",
      saveNumber: "saveNumber",
      saveChooseInfo: "saveChooseInfo",
      saveProperties: "saveProperties",
      setCartNumber: "setCartNumber",
      saveSelectedCartGoods: "saveSelectedCartGoods",
    }),
    goPintuan(item) {
      if (item.pintuangroup_surplus > 0) {
        this.pintuangroup_id = item.pintuangroup_id;
        this.checkProduct(true);
      }
    },
    imgEnlarge(src) {
      console.log(this.priviewList);
      console.log(this.detailInfo.photos);
      this.$refs.mainSrc.show(0);
    },
    mo(e) {
      e.preventDefault();
    },
    move() {
      document.body.style.overflow = ""; // 出现滚动条
      document.removeEventListener("touchmove", this.mo, false);
      console.log(8520);
	},
	 stop(){
        document.body.style.overflow='hidden';
        document.addEventListener("touchmove",this.mo,false);//禁止页面滑动
    },
    // 关闭购物车浮层
    closeCartInfo(value) {
      console.log(999);
      this.saveCartState(value);
      this.move();
    },

    // 数量加
    addNumber() {
      if (
        this.detailInfo.goods_storage &&
        this.numbers > this.detailInfo.goods_storage
      ) {
        this.toastConfig.message = "商品库存不足";
        Toast(this.toastConfig);
        this.numbers = this.detailInfo.goods_storage;
      } else {
        this.numbers++;
      }
    },

    // 数量减
    reduceNumber() {
      if (this.numbers > 1) {
        this.numbers--;
      } else {
        this.numbers = 1;
        this.toastConfig.message = "受不了了，宝贝不能再少了";
        Toast(this.toastConfig);
      }
    },

    // 加入购物车
    checkProduct(checkout) {
      if (!this.isOnline) {
        this.$router.push({ name: "HomeMemberLogin" });
      } else {
        if (checkout) {
          // 立即购买
          if (this.detailInfo.is_virtual == "1") {
            let params = {
              goods_id: this.detailInfo.goods_id,
              quantity: this.numbers,
            };
            if (this.detailInfo.pintuan_type) {
              params["pintuan_id"] = this.detailInfo.pintuan_id;
              params["pintuangroup_id"] = this.pintuangroup_id;
            }
            this.$router.push({ name: "MemberVrBuyStep1", query: params });
          } else {
            let params = {
              buy_now: 1,
              cart_id: this.detailInfo.goods_id + "|" + this.numbers,
            };
            if (this.detailInfo.bargain_info) {
              if (this.detailInfo.bargainorder_info) {
                if (this.detailInfo.bargainorder_info.bargainorder_state == 2) {
                  params[
                    "bargainorder_id"
                  ] = this.detailInfo.bargainorder_info.bargainorder_id;
                } else {
                  this.$router.push({
                    name: "HomeBargainshare",
                    query: {
                      bargainorder_id: this.detailInfo.bargainorder_info
                        .bargainorder_id,
                    },
                  });
                  return;
                }
              } else {
                // 新增砍价
                addBargain(this.detailInfo.bargain_info.bargain_id)
                  .then((res) => {
                    this.$router.push({
                      name: "HomeBargainshare",
                      query: { bargainorder_id: res.result.bargainorder_id },
                    });
                  })
                  .catch(function (error) {
                    Toast(error.message);
                  });
                return;
              }
            } else if (this.detailInfo.pintuan_type) {
              params["pintuan_id"] = this.detailInfo.pintuan_id;
              params["pintuangroup_id"] = this.pintuangroup_id;
            }
            this.$router.push({ name: "MemberBuyStep1", query: params });
          }
        } else {
          if (this.detailInfo.pintuan_type) {
            this.subjectVisible = true;
            this.move();
          } else {
            cartAdd(this.detailInfo.goods_id, this.numbers).then(
              (res) => {
                this.$parent.$emit("update-cart-num");
                this.$parent.$emit("end-addcart-animation");
                Toast(res.message);
                this.move();
              },
              (error) => {
                Toast(error.message);
                this.move();
              }
            );
          }
        }
      }
    },

    keyDown(event) {},

    /*
     * setCurrentIndex: 设置当前选中的规格的id,
     * @parmas: index 当前规格的index
     * @parmas: specList 同类规格的列表
     */
    setCurrentIndex(index, specList, type) {
      console.log(specList[index]);
      let specIndex = [];
      for (var k in specList) {
        if (typeof this.detailInfo.goods_spec[k] !== "undefined") {
          delete this.detailInfo.goods_spec[k];
          this.detailInfo.goods_spec[index] = specList[index];
          if (type == 1) {
            this.defaultName = specList[index];
          } else if (type == 2) {
            this.defaultColor = specList[index];
          } else if (type == 3) {
            this.defaultSize = specList[index];
          }
          break;
        }
      }
      for (var k in this.detailInfo.goods_spec) {
        specIndex.push(k);
      }
      specIndex = specIndex.sort(this.sortNumber).join("|");
      this.getGoodsDetail({
        goods_id: this.specList[specIndex],
        token: this.token,
        extra: {},
      }).catch((error) => {
        Toast(error.message);
      });
    },
    sortNumber(a, b) {
      return a - b;
    },
  },
};
</script>

<style lang="scss" scoped>
.specifications {
  display: flex;
  font-size: 0.7rem;
  line-height: 1rem;
  margin-top: 0.5rem;
  span {
    padding: 0 0.2rem 0 0 !important;
  }
}
// .container{
// 	width: 100%;
// 	height: calc(100vh - 2.5rem);
// 	background-color: #ffffff;
// }
.zIndex {
  z-index: 3000 !important;
}

.mint-popup-bottom {
  overflow: initial;
  // max-height: calc(100vh - 2rem);
  // height: calc(100vh - 2rem);
}
.ui-add-shopping {
  /* position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%; */
  /* z-index: 200; */
  /* background:rgba(0,0,0, 0.4); */
  .shopping-info {
    background: rgba(255, 255, 255, 1);
    // position: absolute;
    width: -webkit-fill-available;
    /* bottom: 0; */
    // z-index: 10;
    width: 100%;
    height: auto;
    margin-bottom: 2.5rem;
    .info-header {
      padding: 0.75rem;
      display: flex;
      justify-content: flex-start;
      padding-bottom: 1.25rem;
      border-bottom: 0.5px solid rgba(232, 234, 237, 1);
      img.info-image {
        width: 6rem;
        height: 6rem;
        border-radius: 1px;
        // margin-top: 0.5rem;
        // position: absolute;
        // top: -0.65rem;
      }
      .info-header-div {
        padding-left: 0.5rem;
        width: 100%;
        span {
          display: block;
          color: #8f8e94;
          &.header-price {
            font-size: 0.9rem;
            line-height: 1rem;
            padding-bottom: 0.6rem;
            color: $primaryColor;
          }
          &:nth-child(2) {
            img {
              vertical-align: middle;
              padding-right: 0.5rem;
              width: 2.5rem;
              height: 1rem;
            }
            span {
              display: inline;
              font-size: 0.7rem;
              line-height: 0.7rem;
              padding-bottom: 0.45rem;
              padding-top: 0.6rem;
            }
          }
          &:nth-child(3) {
            line-height: 1rem;
            font-size: 0.7rem;
            line-height: 1rem;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-right: 0.75rem;
          }
          &:last-child {
            line-height: 1rem;
            font-size: 0.7rem;
            line-height: 1rem;
            padding-top: 0.6rem;
            width: 100%;
            overflow: hidden;
            // text-overflow: ellipsis;
            // white-space: nowrap;
            padding-right: 0.75rem;
          }
        }
      }
      .close {
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        width: 0.65rem;
        height: 0.65rem;
        cursor: pointer;
        opacity: 1;
      }
    }
    div.goods-detail-properties {
      width: 100%;
      overflow-y: auto;
      height: auto;
      max-height: 19.2rem;
      top: 6.2rem;
      bottom: 2.2rem;
      /* height: 100%; */
    }
    div.goods-properties {
      padding: 0.75rem 0;
      p {
        font-size: 0.7rem;
        color: rgba(41, 43, 45, 1);
        line-height: 0.8rem;
        margin: 0;
        padding: 0 0.75rem;
      }
      div.properties-list {
        .first {
          width: 50%;
          box-sizing: border-box;
        }
        div {
          display: inline-block;
          padding-left: 0.75rem;
          img {
            width: 1.4rem;
            height: 1.4rem;
            margin-right: 0.25rem;
          }
          span {
            font-size: 0.5rem;
            color: rgba(78, 84, 93, 1);
            line-height: 0.7rem;
            display: inline-block;
            padding: 0.35rem 0.7rem;
            border: 1px solid #404245;
            border-radius: 0.1rem;
            cursor: pointer;
            margin-top: 0.75rem;
            &.active-properties {
              background: $primaryColor;
              color: rgba(255, 255, 255, 1);
              border: 1px solid $primaryColor;
            }
            &.disabled-properties {
              color: #b1b5bb;
              cursor: none;
              border: 1px solid #a2a6ad;
            }
          }
          /* &:nth-child(even) {
					margin-left: 0.75rem;
					} */
        }
      }
    }
    .posi-fixed {
      // position: fixed;
      // left: 0;
      // bottom: 2rem;
      // z-index: 321;
      width: 100%;
    }
    .info-body {
      padding: 0.75rem 0.75rem 1rem 0.75rem;
      display: flex;
      justify-content: space-between;
      p {
        font-size: 0.7rem;
        color: rgba(41, 43, 45, 1);
        line-height: 0.8rem;
        padding: 0;
        margin: 0;
        padding-bottom: 0.8rem;
      }
      div.ui-number {
        height: 1.5rem;
        display: flex;
        border-radius: 0.15rem 0 0 0.15rem;
        input,
        div {
          height: 1.4rem;
          line-height: 1.4rem;
          text-align: center;
          color: #404245;
          display: inline-block;
          padding: 0;
          margin: 0;
          border: 0;
          outline-offset: 0;
        }
        .ui-common {
          line-height: 1.4rem;
          width: 1.4rem;
          height: 1.4rem;
          border: 1px solid #c7c7cd;
          cursor: pointer;
        }
        .reduce {
          border-right: 0;
        }
        .reduce-opacity {
          opacity: 0.4;
        }
        .add {
          border-left: 0;
        }
        input[type="number"] {
          width: 2rem;
          border: 1px solid #c7c7cd;
          border-radius: 0;
          border-image-width: 0;
          box-shadow: 0;
          vertical-align: bottom;
          &:focus {
            outline: none;
          }
        }
      }
    }
    .info-footer {
      width: 100%;
      position: fixed;
      bottom: 0;
      display: flex;
      .footer-button {
        flex: 1;
        color: #ffffff;
        line-height: 2.2rem;
        text-align: center;
        font-size: 0.7rem;
        height: 2.2rem;
      }
      .active-cart {
        background: $primaryColor;
      }
      .active-buy {
        background: #000;
      }
      .disabled-buy {
        background: #999999;
      }
      .disabled-cart {
        background: #c3c3c3;
      }
    }
  }
}
</style>
